<template>
	<view class="list">
		<zzx-tabs :items="items" :current="current" @clickItem="onClickItem" ref="mytabs" :activeColor='activeColor' :defaultColor="defaultColor">
		</zzx-tabs>
		<view v-show="current === 0">
			<view>
				<!-- 商品列表信息 -->
				<view class="pla-body" v-for="(item,index) in orderList">
					<view class="infosetting">
						<text>订单编号：{{item.order_no}}</text>
						<text style="color: #FF5F49;">待兑换</text>
					</view>
					<view class='img-list' @click="hanldExinfo(item)">
						<view class="pla-img">
							<image :src="item.shop.image"></image>
						</view>
						<view class="pla-info">
							<view class="ply-name">{{item.shop.title}}</view>
							<view style="color: #999999;font-size: 12px;">{{item.shop.subtitle}}</view>
							<view style="color: #666666;font-size: 12px;padding-top: 10px;">{{item.total}} 积分</view>
						</view>
						<view class="pla-num">
							<view style="font-size: 14px;color: #333333;font-weight: bold;">{{item.price}}积分</view>
							<view style="color: #999999;font-size: 12px;">×{{item.num}}</view>
						</view>
					</view>
					<view class="count" style="padding: 10px;border-top: 1px solid #EFEFF4;">
						<view style="font-size: 13px;color: #999999;">共<text style="color: #333333;">{{item.num}}</text>个商品</view>
						<view style="font-size: 14px;color: #333333;padding-left: 10px;">合计：{{item.total}} 积分</view>
					</view>
					<!-- <view class="ex-but">
						<view class="ex-no">取消兑换</view>
						<view class="ex-yes" @click="hanldplaceOrder()">立即兑换</view>
					</view> -->
				</view>
				
				<uni-load-more
				:status="loadStatus"
				></uni-load-more>
				
			
				
			</view>
		</view>
		<view v-show="current === 1">
			<view>
		<!-- 商品列表信息 -->
			<view class="pla-body" v-for="(item,index) in orderList1">
				<view class="infosetting">
					<text>订单编号：{{item.order_no}}</text>
					<text style="color: #FF5F49;">已兑换</text>
				</view>
				<view class='img-list' @click="hanldExinfo(item)">
					<view class="pla-img">
						<image :src="item.shop.image"></image>
					</view>
					<view class="pla-info">
						<view class="ply-name">{{item.shop.title}}</view>
						<view style="color: #999999;font-size: 12px;">{{item.shop.subtitle}}</view>
						<view style="color: #666666;font-size: 12px;padding-top: 10px;">{{item.total}} 积分</view>
					</view>
					<view class="pla-num">
						<view style="font-size: 14px;color: #333333;font-weight: bold;">{{item.price}}积分</view>
						<view style="color: #999999;font-size: 12px;">×{{item.num}}</view>
					</view>
				</view>
				<view class="count" style="padding: 10px;border-top: 1px solid #EFEFF4;">
					<view style="font-size: 13px;color: #999999;">共<text style="color: #333333;">{{item.num}}</text>个商品</view>
					<view style="font-size: 14px;color: #333333;padding-left: 10px;">合计：{{item.total}} 积分</view>
				</view>
				<!-- <view class="ex-but">
					<view class="ex-no">取消兑换</view>
					<view class="ex-yes" @click="hanldplaceOrder()">立即兑换</view>
				</view> -->
				</view>
				
				<uni-load-more
				:status="loadStatus1"
				></uni-load-more>
				
			</view>
			

		</view>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import zzxTabs from "@/components/zzx-tabs/zzx-tabs.vue"
	export default {
		data() {
			return {
				items: ['待兑换', '已兑换'],
				activeColor:'#333333',
				defaultColor:'#999999',
				current:0,
				loadStatus: 'more',
				page: 1,
				orderList:'',
				status:1,
				
				//
				loadStatus1: 'more',
				page1: 1,
				orderList1:'',
				status1:2,
			}
		},
		onLoad(){
			this.gettShopOrder()
		},
		components: {uniLoadMore},
		onReachBottom () {
			if (this.loadStatus === 'more') {
				this.gettShopOrder()
			}
			if (this.loadStatus1 === 'more') {
				this.gettShopOrder1()
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
					
					if(e.currentIndex==0){//待兑换
						this.page = 1;
						this.gettShopOrder(true)
					}
					
					if(e.currentIndex==1){//已兑换
						this.page1 = 1;
						this.gettShopOrder1(true)
					}
				}
			},
			hanldExinfo(item){
					let aa = item;
					let bb = JSON.stringify(aa)
					let cc = encodeURIComponent(bb);
					// console.log(bb);
					// console.log(cc)
					uni.navigateTo({url:`/pages/member/IntegralMall/exchangeInfo?address=${cc}`})
					
			},
			//立即兑换
			hanldplaceOrder(){
				uni.navigateTo({
					url:'/pages/member/IntegralMall/payIntegral'
				})
			},
			
			//列表---待兑换
			gettShopOrder(type) {
				const params = {
					status: this.status,
					page: this.page
				}
				this.loadStatus = 'loading'
				this.$http.get('/shop/order',{params: params}).then((response) => {
					const res = response.data;
					console.log(res)
					if (res.code==0) {
						if (this.page > res.data.last_page) {
							// 没有数据了
							this.loadStatus = 'noMore'
						} else {
							// 未加载完毕
							this.loadStatus = 'more'
							this.page ++
						}
						console.log(type)
						if(type){
							this.orderList = res.data.data
						}else{
							this.orderList = [...this.orderList, ...res.data.data];
						}
					} else {
					}
				})
			},
			
			
			//列表---已兑换
			gettShopOrder1(type) {
				const params = {
					status: this.status1,
					page: this.page1,
				}
				this.loadStatus1 = 'loading'
				this.$http.get('/shop/order',{params: params}).then((response) => {
					const res = response.data;
					console.log(res)
					if (res.code==0) {
						if (this.page1 > res.data.last_page) {
							// 没有数据了
							this.loadStatus1 = 'noMore'
						} else {
							// 未加载完毕
							this.loadStatus1 = 'more'
							this.page1 ++
						}
						console.log(type)
						if(type){
							this.orderList1 = res.data.data
						}else{
							this.orderList1 = [...this.orderList1, ...res.data.data];
						}
					} else {
					}
				})
			},
		}
	}
</script>

<style scoped>
	
.list{
	width: 100%;
}
.list>>>.zzx-tabs-bar{
	display: none;
}
.list>>>.zzx-tabs{
		padding: 5px 0;
		background-color: #fff;
	}
	
	/**/
	.pla-body {
		margin: 10px 16px 10px 16px;
		border-radius: 4px;
		background-color: #fff;
		padding-bottom: 10px;
	}
	.img-list{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.pla-img{
		    margin: 10px;
	}
	.pla-img image{
		width: 90px;
		height: 90px;
		border-radius: 4px;
	}
	.infosetting{
		padding: 12px 10px;
		border-bottom: 1px solid #EFEFF4;
		color: #333333;
		font-size: 13px;
		display: flex;
		    flex-direction: row;
		    width: 100%;
		    justify-content: space-between;
	}
	.pla-num{
		width: 105px;
		padding-top: 10px;
		text-align: right;
		padding-right: 10px;
	}
	.ply-name{
		  overflow: hidden;
		  text-overflow: ellipsis;
		  display: -webkit-box;
		  -webkit-line-clamp: 2;
		  -webkit-box-orient: vertical;
		color: #333333;
		font-weight: bold;
		font-size: 12px;
	}
	.pla-info{
		    width: 480upx;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
	}
		
	.count{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		color: #999999;
		padding: 0 10px;
		align-items: center;
	}
	.red-price{
		font-size: 16px;
	}
		
	.ex-but{
		display: flex;
		    justify-content: flex-end;
			padding-right: 10px;
	}
	.ex-no{
		width:158upx;
		height:60upx;
		border-radius:30px;
		border:1px solid rgba(239,239,244,1);
		color: #333333;
		line-height: 58upx;
		text-align: center;
		font-size: 13px;
		margin-right: 10px;
	}
	.ex-yes{
		width:158upx;
		height:60upx;
		border-radius:30px;
		border:1px solid rgba(255,95,73,1);
		color: #FF5F49;
		line-height: 58upx;
		text-align: center;
		font-size: 13px;
	}
</style>
